<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--设置画布的样式-->
    <style>
        canvas {
            /*调整画布的位置*/
            display: block;
            margin: 0 auto;
            
            /*设置画布的背景颜色*/
            background-color: #33cc99;
        }
    </style>
</head>
<body>
    <div style="text-align:center;">
        <button onclick="window.location='Snakes.html'">重新开始</button> 
        <button onclick=window.history.back(-1)>返回主界面</button> <!--返回上一层界面-->
        <button onclick="window.location='Over.html'">退出游戏</button> 
    
    </div>
       <!-- 
        准备canvas画布
        width 宽度
        height 高度
    -->
    <canvas width="600" height="600" id="huabu"></canvas>

    <!--绘制-->
    <script>
        
        //1.获取画布对象
        var huabu = document.getElementById('huabu')
        //2.获取画图工具箱
        var tools = huabu.getContext('2d')

        /*-------------  绘制食物初始位置开始  -------------*/
        //math.random() 可生成[0,1)的随机数，*20后是[0,20)
        //math.floor() 可对括号内的数字进行向下取整，即舍去小数部分
        var foodx = Math.floor(Math.random() * 20)
        var foody = Math.floor(Math.random() * 20)
        /*-------------  绘制食物初始位置结束  -------------*/
        
        //设置变量标记食物是否被吃掉 默认为false
        var foodflag1 = false
        var foodflag2 = false
        //设置变量标记是否碰到蛇身
        var snakeflag1 = false
        var snakeflag2 = false
        //设置变量标记是否碰到边界
        var rectflag1 = false
        var rectflag2 = false

        //设置 蛇 数组 记录每一节的位置
        var snake1 = [{ x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }]
        var snake2 = [{ x: 16, y: 19 }, { x: 17, y: 19 }, { x: 18, y: 19 }]

        //设置蛇初始运动方向为水平向右
        var tempx1 = 1
        var tempy1 = 0
        var tempx2 = -1
        var tempy2 = 0

        //设置监听器 监听运动方向
        document.addEventListener('keydown', function(event1){
            if( event1.keyCode === 38){   //上
                tempx1 = 0
                tempy1 = -1
            }else if( event1.keyCode === 40){   //下
                tempx1 = 0
                tempy1 = 1
            }else if( event1.keyCode === 37){   //左
                tempx1 = -1
                tempy1 = 0
            }else if( event1.keyCode === 39){   //右
                tempx1 = 1
                tempy1 = 0
            }
        })

        document.addEventListener('keydown', function(event2){
            if( event2.keyCode === 87){   //上
                tempx2 = 0
                tempy2 = -1
            }else if( event2.keyCode === 83){   //下
                tempx2 = 0
                tempy2 = 1
            }else if( event2.keyCode === 65){   //左
                tempx2 = -1
                tempy2 = 0
            }else if( event2.keyCode === 68){   //右
                tempx2 = 1
                tempy2 = 0
            }
        })

        //使用定时器让蛇动起来
        //每秒进行三次 擦除->重绘
        setInterval(function() {
            //判断是否要终止游戏
            if( rectflag1 || snakeflag1 || rectflag2 || snakeflag2 ){
                if( rectflag1 || snakeflag1 ){
                    window.alert("PLAYER2 IS WINNER");
                }else{
                    window.alert("PLAYER1 IS WINNER");
                }
                clearInterval()
                return 
            }

            //不断进行擦除->重绘 实现画面的静态->动态
            //擦除
            tools.clearRect(0, 0, 600, 600)

            /*-------------  绘制食物开始  -------------*/
            if( foodflag1 || foodflag2 ){
                //math.random() 可生成[0,1)的随机数，*20后是[0,20)
                //math.floor() 可对括号内的数字进行向下取整，即舍去小数部分
                foodx = Math.floor(Math.random() * 20)
                foody = Math.floor(Math.random() * 20)
                foodflag1 = false    //重置食物标记
                foodflag2 = false
            }
            
            //绘制矩形
            //tools.fillRect(x, y, width, height)
            //设置填充颜色
            tools.fillStyle = '#cccc00'
            tools.fillRect(foodx * 30, foody * 30, 30, 30)
            /*-------------  绘制食物结束  -------------*/

            /*-------------  绘制贪吃蛇开始  -------------*/
            //{} 对象
            //[] 数组
            //snake.length 为 snake 数组的数组长度
            //数组的第一个元素位置记录的是蛇头的位置

            //蛇 的长度变化 删除最后一节 增加一节至开头
            //snake.pop() 删除数组最后一个元素
            //snake.unshift() 在数组第一个元素前增加一个元素

            //先将 蛇 绘制出来再进行终止条件判断 不然会使 蛇 消失
            for( var i=0; i<snake1.length; i++ ){
                if( i === 0 ){    //判断是否是蛇头
                    tools.fillStyle = '#ff0033'
                }else{
                    tools.fillStyle = '#333399'
                }
                tools.fillRect(snake1[i].x * 30, snake1[i].y * 30, 30, 30)
            }

            for( var i=0; i<snake2.length; i++ ){
                if( i === 0 ){    //判断是否是蛇头
                    tools.fillStyle = '#FF69B4'
                }else{
                    tools.fillStyle = '#8470FF'
                }
                tools.fillRect(snake2[i].x * 30, snake2[i].y * 30, 30, 30)
            }

            var oldhead1 =  snake1[0]
            var newhead1 = {
                x: oldhead1.x + tempx1,
                y: oldhead1.y + tempy1
            }

            var oldhead2 =  snake2[0]
            var newhead2 = {
                x: oldhead2.x + tempx2,
                y: oldhead2.y + tempy2
            }
            
            for( var i=0; i<snake1.length; i++ ){
                if( newhead1.x === snake1[i].x && newhead1.y === snake1[i].y ){
                    snakeflag1 = true
                }
                if( newhead2.x === snake1[i].x && newhead2.y === snake1[i].y ){
                    snakeflag2 = true
                }
            }

            for( var i=0; i<snake2.length; i++ ){
                if( newhead2.x === snake2[i].x && newhead2.y === snake2[i].y ){
                    snakeflag2 = true
                }
                if( newhead1.x === snake2[i].x && newhead1.y === snake2[i].y ){
                    snakeflag1 = true
                }
            }

            if( newhead1.x < 0 || newhead1.y < 0 || newhead1.x * 30 >= 600 || newhead1.y * 30 >= 600 ){
                rectflag1 = true
            }else{
                snake1.unshift(newhead1)  //增加蛇的长度

                //当 foodflag 变为 true 即表示蛇吃到食物
                //1.改变 foodflag 的值
                //2.增加蛇的长度
                if( snake1[0].x === foodx && snake1[0].y === foody )  //蛇吃到食物的时候长度不变
                {
                    foodflag1 = true
                }else{  //蛇没吃到食物的时候 长度减一
                    snake1.pop()
                }
            }

            if( newhead2.x < 0 || newhead2.y < 0 || newhead2.x * 30 >= 600 || newhead2.y * 30 >= 600 ){
                rectflag2 = true
            }else{
                snake2.unshift(newhead2)  //增加蛇的长度

                //当 foodflag 变为 true 即表示蛇吃到食物
                //1.改变 foodflag 的值
                //2.增加蛇的长度
                if( snake2[0].x === foodx && snake2[0].y === foody )  //蛇吃到食物的时候长度不变
                {
                    foodflag2 = true
                }else{  //蛇没吃到食物的时候 长度减一
                    snake2.pop()
                }
            }

            
            /*-------------  绘制贪吃蛇结束  -------------*/

            /*-------------  绘制网格开始  -------------*/
            
            //3.get要用的画图工具
            //4.找到位置
            for( var i=1; i<20; i++ )
            {
                tools.moveTo(0, 30 * i + 0.5)
                tools.lineTo(600, 30 * i + 0.5)

                tools.moveTo(30 * i + 0.5, 0)
                tools.lineTo(30 * i + 0.5, 600)
            }
            //5.设置颜色
            tools.strokeStyle = 'white'
            //6.绘制
            tools.stroke()
            /*-------------  绘制网格结束  -------------*/
        }, 1000 / 3)
        
    </script>

</body>
</html>